<template>
	<view class="safety-page">
		<view class="account">账号</view>
		<view class="safety-header">
			<view class="safety-header1">
				<view class="safety-password">修改登录密码</view>
				<view class="safety-rank">安全等级:中</view>
				<view class="next">></view>
			</view>
			<view class="line"></view>
			<view class="safety-header1">
				<view class="telphone">修改手机号</view>
				<view class="tel">183****3452</view>
				<view class="next1">></view>
			</view>
			<view class="line"></view>
			<view class="safety-header1">
				<view class="account-manage">账号绑定管理</view>
				<view class="bind">绑定/解绑等</view>
				<view class="next2">></view>
			</view>
		</view>
		<view class="safety">安全</view>
		<view class="safety-body">
			<view class="safety-body1">
				<view class="recent-login">最近登录记录</view>
				<view class="next3">></view>
			</view>
			<view class="line"></view>
			<view class="safety-body1">
				<view class="account-service">账号客服</view>
				<view class="next4">></view>
			</view>
			<view class="line"></view>
			<view class="safety-body1">
				<view class="logout">注销账号</view>
				<view class="logout-item">注销后无法恢复，请谨慎操作</view>
				<view class="next5">></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default{
		name:"safety-components",
	}
</script>

<style>
	.safety-page{
		position: absolute;
		height: 100%;
		width: 100%;
		background-color: #f1f3f4;
	}
	.account{
		/* front-size:30rpx; */
		color:gray;
		margin-top:20rpx;
		margin-left:25rpx ;
		margin-bottom: 20rpx;
	}
	.safety-header{
		background-color: white;
		font-size:30rpx;
		color:black;
	}
	.line{
		margin-top: 20rpx;
		width: 100%;
		height:3rpx;
		background-color: whitesmoke;
	}
	.safety-header1{
		display: flex;
		
		/* margin-left: 20rpx; */
	}
	.safety-password{
		margin-top: 20rpx;
		margin-left:25rpx ;
	}
	.safety-rank{
		margin-top: 20rpx;
		margin-left:300rpx;	
	}
	.next{
		margin-top: 20rpx;
		margin-left: 30rpx;
	}
	.rank{
		margin-top: 10rpx;
		margin-left: 10rpx;
		color: red;
	}
	.telphone{
		margin-top: 20rpx;
		margin-left:25rpx ;
	}
	.tel{
		margin-top: 20rpx;
		margin-left: 300rpx;
	}
	.next1{
		margin-top: 20rpx;
		margin-left: 40rpx;
	}
	.account-manage{
		margin-top: 20rpx;
		margin-left:25rpx ;
		margin-bottom: 20rpx;
	}
	.bind{
		margin-top: 20rpx;
		margin-left: 280rpx;
	}
	.next2{
		margin-top: 20rpx;
		margin-left: 45rpx;
	}
	
	.safety{
		color:gray;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		margin-left: 25rpx;
	}
	.safety-body{
		background-color: white;
		/* font-size:30rpx;
		color:black; */
	}
	.recent-login{
		margin-top: 20rpx;
		margin-left: 25rpx;
	}
	.next3{
		margin-top: 20rpx;
		margin-left: 490rpx;
	}
	.account-service{
		margin-top: 20rpx;
		margin-left:25rpx ;
	}
	.next4{
		margin-top: 20rpx;
		margin-left: 550rpx;
	}
	.logout{
		margin-top: 20rpx;
		margin-left:25rpx ;
		margin-bottom:20rpx ;
	}
	.safety-body1{
		display: flex;
	}
	.logout-item{
		margin-top: 20rpx;
		margin-left:140rpx ;
		margin-bottom:20rpx ;
		color:gray;
	}
	.next5{
		margin-top: 20rpx;
		margin-left: 20rpx;
		margin-bottom:20rpx ;
	}
</style>